<template>
  <div>
    <content-header :title="title"></content-header>
    <div v-if="$route.name === 'Exhibitions-previous'" class="condition-wrap xui-margin-top">
      <div class="xui-fc"><span class="xui-fl">{{isCN?"年份":"Years"}} : </span><category class="xui-fl" :tabList="years" :tabIndex="search.yearIndex" @changeCategory="changeYear"></category></div>
      <div class="xui-margin-top-xs search-wrap xui-fc">
        <input class="search-input" type="text" v-model="search.name" @keyup.enter="getList" :placeholder="isCN?'特别展览名称':'Exhibitions\' name'">
        <el-button class="search-btn" type="primary" @click="handleSearch" size="small">搜索</el-button>
      </div>
    </div>


    <ul v-if="listData.length"  class="xui-margin-top-lg list">
      <li v-for="(item,index) in listData" :key="index" class="xui-margin-bottom-lg">
        <router-link v-if="item.style == 1" :to="href(item)" class="xui-block" target="_blank">
          <div class="list__img">
            <img-box
              height="435"
              width="100%"
              :imgSrc="item.mainPicUrl"
            >
            </img-box>
          </div>
          <div class="list__text xui-padding-lg">
            <div v-if="isCN">
              <h4>{{item.title}}</h4>
              <div v-if="item.summary">
                <p class="summary-line" v-for="(line,index) in item.summary.split('\n')" :key="index">{{line}}</p>
              </div>
            </div>
            <div v-else>
              <h4>{{item.titleEn}}</h4>
              <p class="summary-line" v-for="(line,index) in item.summaryEn.split('\n')" :key="index">{{line}}</p>
            </div>
          </div>
        </router-link>
        <a v-else :href="href(item)" class="xui-block" target="_blank">
          <div class="list__img">
            <img-box
              height="435"
              width="100%"
              :imgSrc="item.mainPicUrl"
            >
            </img-box>
          </div>
          <div class="list__text xui-padding-lg">
            <div v-if="isCN">
              <h4>{{item.title}}</h4>
              <div v-if="item.summary">
                <p class="summary-line" v-for="(line,index) in item.summary.split('\n')" :key="index">{{line}}</p>
              </div>
            </div>
            <div v-else>
              <h4>{{item.titleEn}}</h4>
              <p class="summary-line" v-for="(line,index) in item.summaryEn.split('\n')" :key="index">{{line}}</p>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <p v-else class="xui-margin-top xui-text-center">暂无数据</p>
    
    <!-- 分页组件 --> 
    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.count"
      :page-size="page.size"
      class="xui-margin-top xui-text-center"
      @current-change="getList"
      :current-page.sync="page.index">
    </el-pagination>


  
  </div>
</template>
<script>
import ContentHeader from "../../../components/widge/content-header";
import { getSpecExhibList, getYears } from "@/api/specExhib";
import ImgBox from "@/components/widge/img-box";
import { getLang } from "@/utils/lang";
import category from "@/components/widge/category-tabs/tab-bar";
import { rootsUrl } from "@/utils";

export default {
  components: {
    ContentHeader,
    "img-box": ImgBox,
    category
  },
  props: {
    item: Object
  },
  data() {
    return {
      listData: [],
      page: {
        count: null,
        size: 5,
        index: 1
      },
      search: {
        name: "",
        yearIndex: 0,
        year: ""
      },
      years: [
        {
          name: "全部",
          index: ""
        }
      ]
    };
  },
  computed: {
    isCN() {
      return getLang() !== "en";
    },
    type() {
      let route = this.$route.name.split("-")[1];
      switch (route) {
        case "current":
          return 1;
          break;
        case "special":
          return 2;
          break;
        case "previous":
          return 3;
      }
    },
    title() {
      let route = this.$route.name.split("-")[1];
      switch (route) {
        case "current":
          return this.isCN ? "基本陈列" : "Current Exhibitions";
          break;
        case "special":
          return this.isCN ? "特别展览" : "Special Exhibitions";
          break;
        case "previous":
          return this.isCN ? "特展回顾" : "Previous Exhibitions";
      }
    }
  },
  methods: {
    getList() {
      getSpecExhibList(
        this.page.index,
        this.type,
        this.search.name,
        this.search.year
      ).then(res => {
        this.listData = res.data.recordsList;
        this.page.count = res.data.count;
        return false;
        // if (this.isCN) {
        //   this.listData = res.data.recordsList;
        //   this.page.count = res.data.count;
        //   return false;
        // }
        // this.listData = res.data.recordsList.filter(item => {
        //   return item.english == true;
        // });
      });
    },
    handleSearch() {
      this.getList();
    },
    changeYear(year) {
      console.log(year);
      this.search.year = year.index;
      this.search.yearIndex = year.index;
      this.getList();
    },
    getYears() {
      getYears().then(res => {
        let arr = res.data.recordsList;
        arr.forEach(item => {
          console.log("year", item);
          if (item) {
            this.years.push({
              name: item,
              index: item
            });
          }
        });
      });
    },
    href(item) {
      if (!item.style) return;
      let result;
      let num = Number(item.style);
      switch (num) {
        case 1:
          result = { name: "specExhibition", params: { id: item.id } };
          break;
        default:
          result = `${rootsUrl[0]}/mb/${num}/index.html?id=${item.id}`;
      }
      return result;
    }
  },
  mounted() {
    this.getList();
    this.getYears();
  },
  watch: {
    type: function() {
      this.page.index = 1;
      this.getList();
    }
  }
};
</script>

<style lang='less' scoped>
.list {
  width: 100%;
}

.list .list__img {
  width: 100%;
  height: 435px;
}

.list .list__img a {
  display: block;
}

.list__text {
  background-color: #faf7f2;
  .summary-line {
    color: #666;
    line-height: 2;
  }
}

.list .list__text h4 {
  font-size: 26px;
  color: #d3991e;
  font-weight: normal;
}

.list .list__text p {
  font-size: 15px;
}

.search-wrap {
  .search-input {
    border: 1px solid #ddd;
    height: 32px;
    padding-left: 10px;
    color: #444;
    float: left;
  }
  .search-btn {
    float: left;
    margin-left: 5px;
  }
}
</style>
